【物件導向】CSS樣式 - javascript系列課程Days-1 [Api-插件開發] - [無需依賴jQuery]

javascript 物件導向

pratnket 2017-02-17 02:07:56 ‧ 29151 瀏覽

分享至

作者:pratnket
版本:2017_Var1

javascript系列課程Days-1
javascript系列課程Days-2

嗯..無聊寫的...一般來說...有jQuery的CSS功能了
使用方式如下

$(#demo1).css("color:red");

純粹寫一個不依賴的...jQuery
使用方式如下

    Style.search('ID或Class').val({
        Keys1:"字串",
        Keys2:"字串",
    });

一般來說寫Style大部分都是要應急 OR 不懂繼承的 CSS 常幹的事...
例如5:30下班
他給你5:15分時給你任務...
嗯...我就寫Style裡面去噜
畢竟網頁交接都是看前輩的文件(還有一堆CSS地獄坑)<==沒人交接...
我也是慢慢學的

-獲取DOM對象
可以幹很多事
AJAX
輸入框失去焦點變色
動畫(一閃一閃亮晶晶...)
寄信電子報
表單驗證

嗯?睡覺...

明天有空在寫詳細介紹

首頁

A頁
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Style.JS</title>
	<style>
	* {margin:0; padding:0;}
	body {background: #CCC;}
	::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
	::selection { background:#FF5E99; color:#fff; text-shadow: none; } 
	.wrapper {
		width: 710px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		background: #FFFFFF;
		padding: 50px;
	}
	.code {
		background: #f8f8f8;
		border: 1px solid #ccc;
		margin-bottom: 2em;
		padding: 10px;
	}
	</style>
</head>
<body>
	<div class="wrapper">
		<header>
			<h1>Style.js</h1>
			<h4>作者:pratnket</h4>
			<h4>版本:2017_Var1</h4>
			<br>
			<p>A simple plug to divide something by JavaScript,no need jQuery.</p>
			<p>一個輕量級的JavaScript插件，可以通過這個插件做style，單詞或句子進行變化，無需依賴jQuery。</p>
			<br>
		</header>
		
		<article>
			
			<h1 align=center>測試字串</h1>
			<div class="code" align=center>
				
				<h1 id="demo1">ColorDivide.listen('#demo1')</h1>
			</div>
			
			<h1 align=center>測試字串</h1>
			<div class="code" align=center>
				
				<h1 id="demo1">ColorDivide.</h1>
				<h1 id="demo2">config({color_bsdic:{ H:60,S:90,L:30 }}).</h1>
				<h1 id="demo2">listen('#demo2');</h1>
			</div>

		</article>
	</div>
	<script src="Style.js"></script>
	<script>
		Style.search('#demo1').val({
			color:"red",
			width:"40px",
		});
		
		Style.search('#demo2').val({
			border:"10px",
			clear:"both"
		});
	</script>
</body>
</html>

JS頁


B頁
(function () {
	var options = {
		splitter: 'Default',
		enemy:''
	}
	//helper
	var f_keys = function(obj){
		var keys = new Array()
		Object.keys(arguments[i]).forEach(function(Value) {
			keys.push(Value);
		});
		return keys
	}
	var f_value = function(obj){
		var value = new Array()
		Object.values(arguments[i]).forEach(function(Value) {
			value.push(Value);
		})
		return value
	}

	//API
	var api = {
		config: function (opts) {
			if(!opts) return options;
			for(var key in opts) {
				options[key] = opts[key];
			}
			return this;
		},
		
		search: function search(elem) {
			if (typeof elem === 'string') {
				var elems = document.querySelectorAll(elem),
					i = elems.length;
					while (i--) {
						search(elems[i]);
					}
					options.enemy = elems;
					return this;
			}
			return this;
		},
				
		val: function val() {
			i = arguments.length;
			while (i--) {
				if (typeof arguments [i]=== "object") {
					j = options.enemy.length;
					while (j--) {
						keys  = f_keys(arguments [i]);
						value = f_value(arguments [i]);
					}
				}
			}
			i = arguments.length;

			j = options.enemy.length;
			while (j--) {
				x = options.enemy[j] ;
				k = keys.length;
				while (k--) {
					x.style.cssText += keys[k] +':'+ value[k] + ';';
					console.log("Keys:" + keys[k] + "   Value:" + value[k]);
				}		
			}	

			return this;
		}

	}
	this.Style = api;
})();